<template>
  <view class="px-2 box-border">
    <view class="mt-2.5" v-if="info">
      <personalModule
        :height="208"
        :leftWidth="165"
        showStatus
        :statusName="
          info.residenceStatus === 0
            ? '常住'
            : info.residenceStatus === 1
            ? '暂住'
            : ''
        "
        :statusBgColor="info.residenceStatus === 0 ? '#33A954' : '#BBBBBB'"
      >
        <template #left>
          <up-avatar
            :src="norAvatar"
            shape="circle"
            size="125rpx"
            mode="scaleToFit"
          ></up-avatar>
        </template>
        <template #right>
          <view
            class="right flex flex-col justify-between ml-2 text-[28rpx] color-black h-[100%]"
            style="width: calc(100% - 165rpx - 16rpx)"
          >
            <view class="flex flex-row items-center">
              <text class="font-bold">{{ info.userName }}</text>
              <text class="mx-4">{{ info.phonenumber }}</text>
            </view>
            <text>{{
              info.communityName +
              (info.alleyName ? info.alleyName : "") +
              (info.subdistrict ? info.subdistrict : "") +
              (info.building ? info.building : "") +
              (info.house ? info.house : "")
            }}</text>
            <button
              class="btn-038AFE btn-mini ml-0"
              @click="onPageJump('/subPages/crowd/mine/editPersonalInfo')"
            >
              编辑个人信息
            </button>
          </view>
        </template>
      </personalModule>
    </view>

    <moduleOuterBox moduleTitle="我的事项" :moduleIcon="wdsxIcon">
      <view class="business-menu grid grid-cols-3 gap-3 mt-5">
        <view
          class="business-item rounded-2 p-2 box-border text-center"
          v-for="(item, index) in businessMenu"
          :key="index"
          :style="`background: linear-gradient(180deg, ${item.bgOffset0} 0%, ${item.bgOffset1} 100%);`"
          @click="onPageJump(item.pageUrl)"
        >
          <view>
            <image
              class="icon"
              :src="item.icon"
              mode="aspectFit"
              style="width: 56rpx; height: 56rpx"
            ></image>
          </view>
          <text class="text-[29rpx] color-black">{{ item.title }}</text>
        </view>
      </view>
    </moduleOuterBox>
    <button
      class="rounded-2 bg-white color-[#038AFE] border-[#038AFE] h-[83rpx] leading-[83rpx] text-[33rpx] absolute bottom-[56rpx]"
      style="border: 1px solid #038afe; width: calc(100% - 32rpx)"
      @click="showModal = true"
    >
      退出登录
    </button>
    <up-modal
      :show="showModal"
      title="确定退出登录？"
      content="退出后部分功能将无法正常使用"
      contentTextAlign="center"
    >
      <template #confirmButton>
        <view class="flex flex-row justify-between item-center">
          <view class="w-[35%]">
            <up-button
              type="info"
              hairline
              text="取消"
              @click="showModal = false"
            ></up-button>
          </view>
          <view class="w-[35%]">
            <up-button
              type="primary"
              hairline
              text="确定退出"
              @click="userInfoStore.logout"
            ></up-button>
          </view>
        </view>
      </template>
    </up-modal>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import moduleOuterBox from "@/components/moduleOuterBox/moduleOuterBox.vue";
import norAvatar from "@/static/icon/avatar.png";
import wdsxIcon from "@/static/icon/wdsx.png";
import bszxIcon from "@/static/icon/bszxIcon.png";
import fwpjIcon from "@/static/icon/fwpjIcon.png";
import jbtsIcon from "@/static/icon/jbtsIcon.png";
import { onPageJump } from "@/utils/tools";
import { crowdUserInfo } from "@/api/user";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const info = <any>ref(null);
const showModal = ref(false);
// 我的事项菜单
const businessMenu = ref([
  {
    id: 1,
    icon: bszxIcon,
    title: "办事咨询",
    bgOffset0: "#fef9ec",
    bgOffset1: "#fffcf7",
    pageUrl: "/subPages/crowd/serviceConsultation/hisConsultation",
  },
  {
    id: 2,
    icon: fwpjIcon,
    title: "服务评价",
    bgOffset0: "#F6FFFD",
    bgOffset1: "#F3FFFB",
    pageUrl: "/subPages/crowd/serviceEvaluation/allEvaluation",
  },
  {
    id: 3,
    icon: jbtsIcon,
    title: "举报投诉",
    bgOffset0: "#ECF5FC",
    bgOffset1: "#F4F8FB",
    pageUrl: "/subPages/crowd/reportComplaint/hisComplaint",
  },
]);
// 获取群众个人信息
const getCrowdUserInfo = () => {
  crowdUserInfo({ crowdUserId: userInfoStore.userInfo.userId })
    .then((res: any) => {
      const { data } = res;
      info.value = data;
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

onShow(() => {
  getCrowdUserInfo();
});
</script>

<style lang="scss" scoped>
.individual-center {
  .business-menu {
    width: 100%;
    .business-item {
      height: 140rpx;
      box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
      text-align: center;
    }
  }
}
</style>
